<style>
    .btn-white {
        color: inherit;
        background: white;
        border: 1px solid #e7eaec;
    }
    .table-bordered {
        border: 1px solid #EBEBEB;
    }
    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td {
        background-color: #F5F5F6;
        border-bottom-width: 1px;
    }
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #e7e7e7;
    }
    .table > thead > tr > th {
        border-bottom: 1px solid #DDDDDD;
        vertical-align: bottom;
    }
    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        border-top: 1px solid #e7eaec;
        line-height: 1.42857;
        padding: 8px;
        vertical-align: top;
    }
</style>
<div>
    <div class="panel-body col-sm-10 col-sm-offset-1 shadow">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th class="text-center">
                        训练名
                    </th>
                    <th class="text-center">
                        迭代次数
                    </th>
                    <th class="text-center">
                        花费总时间
                    </th>
                    <th class="text-center">
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
            {% for train in trains %}
                <tr>
                    <td class="text-center">
                        <a href="/translation/train_info?train_id={{ train.id }}"><span>{{ train.name }}</span></a>
                    </td>
                    <td class="text-center">
                        <div class="progress {% if train.cur_epoch != train.epochs %} progress-striped active {% endif %}" style="margin-bottom: 0px">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                 style="width: {% widthratio train.cur_epoch train.epochs 100 %}%">
                                {% widthratio train.cur_epoch train.epochs 100 %}%
                            </div>
                        </div>
                    </td>
                    <td class="text-center">
                        {{ train.total_time }}
                    </td>
                    <td class="text-center">
                        <div class="btn-group">
                            {% if train.cur_epoch == train.epochs %}
                            <button data-toggle="modal" class="btn-white btn btn-xs" value="{{ train.save_path }}" onclick="load_weight_path('{{ train.mengine_id }}', $(this).val())" value="{{ train.save_path }}">加载</button>
                            <button data-toggle="modal" class="btn-white btn btn-xs" onclick="delete_train('{{ train.id }}')">删除</button>
                            {% elif train.is_train %}
                            <button data-toggle="modal" class="btn-white btn btn-xs" onclick="stop_train('{{ train.id }}')">提前结束</button>
                            {% else %}
                            {% if train.cur_epoch == 0 %}
                            <button data-toggle="modal" class="btn-white btn btn-xs" onclick="train('{{ train.mengine.id }}', '{{ train.id }}', false, this)">开始训练</button>
                            {% else %}
                            <button data-toggle="modal" class="btn-white btn btn-xs" onclick="train('{{ train.mengine.id }}', '{{ train.id }}', true, this)">继续训练</button>
                            {% endif %}
                            <button data-toggle="modal" class="btn-white btn btn-xs" onclick="delete_train('{{ train.id }}')">删除</button>
                            {% endif %}
                        </div>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <div>
            <nav aria-label="...">
                <ul class="pager" style="margin-bottom: 0px">
                    {% if page.has_previous %}
                        <li>
                            <a href="javascript: train_list({{page.previous_page_number}})">上一页</a>
                        </li>
                    {% else %}
                        <li class="disabled">
                            <a href="#">上一页</a>
                        </li>
                    {% endif %}

                    <li>
                        <select id="train-page" onchange="change_train_list()">
                            {% for page_number in paginator.page_range %}
                                {% if page_number == page.number %}
                                    <option selected value="{{ page_number }}">{{page_number}}</option>
                                {% else %}
                                    <option value="{{ page_number }}">{{page_number}}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </li>

                    {% if page.has_next %}
                        <li>
                            <a href="javascript: train_list({{page.next_page_number}})">下一页</a>
                        </li>
                    {% else %}
                    <li class="disabled">
                        <a href="#">下一页</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
    <script>

        function change_train_list() {
            train_list($('#train-page option:selected').val())
        }

        function delete_train(train_id) {
            $.ajax({
                type: 'get',
                url: '/translation/delete_train',
                data: {train_id: train_id},
                success: function (res) {
                    console.log(res)
                    $('#train-list-a').click()
                }
            })
        }

        function stop_train(train_id, el) {
            $.get('/translation/train_stop', {train_id: train_id}, function(res) {
                console.log(res)
                $('#train-list-a').click()
            })
        }

        function train(engine_id, train_id, is_keep, el) {
            $.ajax({
                type: 'get',
                url: '/translation/train',
                data: {
                    engine_id: engine_id,
                    train_id: train_id,
                    is_keep: is_keep,
                },
                success: function (res) {
                    console.log(res)
                    if(res.status == 'success') {
                        $('#train-list-a').click()
                    }
                }
            })
        }
    </script>
</div>